
<template>
    <div class="keyPage">
      <input type="text" class="keyinput" v-model="currentNumber" />
      <div class="inputBtnList">
        <button class="keybut" @click="traceNumber" v-for="(item, key) in buttons" :key="key">{{item}}</button>
      </div>
    </div>
</template>

<script>
export default {
  name: "Keyboard",
  data() {
    return {
      currentNumber: "",
       buttons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0,'.', "清除"]
      // buttons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0,'.', "清除", "退格"]
      // buttons: [1, 2, 3,"退格", 4, 5, 6,"清除", 7, 8, 9,"X",".", 0 ,'00',"确定"]
	};
  },
   props: {
    father: Object
  },
  methods: {
    traceNumber: function(event) {
      const btnText = event.target.textContent;
      if (btnText === "清除") {
        this.currentNumber = "";
      } else if (btnText === "退格") {
        this.currentNumber = this.currentNumber.substring(
          0,
          this.currentNumber.length - 1
        );
      } else {
		this.currentNumber += btnText;
	}
	this.father.number=this.currentNumber;
    }
  }
};
</script>

<style>
/* * {
  margin: 0;
  padding: 0;
  font-weight: bold;
} */
.keyPage {
  /* background: url('timg.jpeg') no-repeat; */
  margin: auto;
  padding: 0;
  background-size: 100% 100%;
  overflow: hidden;
  width: 600px;
  height: 200px;
  position: relative;
  top:120px;
}
.keyinput {
  margin-top: 0;
  width: 195px;
  height: 20px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.inputBtnList {
  margin: auto;
  width: 200px;
  height: 100px;
  box-sizing: border-box;
}
.keybut {
  width: 50px;
  height: 40px;
}
</style>














































































